import React from "react";
import { Modal, Form, Select, Cascader } from "antd";
import { connect } from "dva";

const { Option } = Select;

@connect(({ FlowChart }) => ({ FlowChart }))
@Form.create()
class FlowRelationSelector extends React.Component {

  state = {
    standardData: [
      { value: "NONE", label: "无" },
      { value: "ASSIGNEE", label: "办理人" },
      { value: "INITIATOR", label: "流动启动人" },
    ], // 相对基准下拉框
  };

  getNodeOption = () => {
    const { FlowChart: { flowNodesData } } = this.props;
    const nodeChild = flowNodesData.filter((item) => (item.model.properties.overrideid !== "")).map((item = {}) => (
      {
        value: item.model.properties.overrideid,
        label: item.label,
      }
    ));
    const nodeOptions = [
      {
        value: "NONE",
        label: "无",
      },
      {
        value: "PREVIOUS",
        label: "上一节点",
      },
      {
        value: "SPECIFY",
        label: "指定节点",
        children: nodeChild,
      },
    ];
    return nodeOptions;
  };

  handleNodeChange = (value) => {
    const { form: { setFieldsValue } } = this.props;
    if (value[0] !== "NONE") {
      setFieldsValue({
        standard: "",
      });
      this.setState({
        standardData: [
          { value: "ASSIGNEE", label: "办理人" },
        ],
      });
    } else {
      this.setState({
        standardData: [
          { value: "NONE", label: "无" },
          { value: "ASSIGNEE", label: "办理人" },
          { value: "INITIATOR", label: "流动启动人" },
        ],
      });
    }

  };

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { onOk, form: { validateFields } } = this.props;
    validateFields((err, values) => {
      const selectNode = values.node && values.node.length > 1 && values.node[1];
      if (!err) {
        const param = {
          ...values,
          node: values.node && values.node.length > 0 && values.node[0] || "",
          selectNode,
          selectNodeName: selectNode && this.getNodeOption()[2].children.find((item) => item.value === selectNode).label,
        };
        if (typeof onOk === "function") {
          onOk(param);
        }
      }
    });
  };

  handleCancel = () => {
    const { onCancel } = this.props;
    onCancel();
  };

  render() {
    const { visible, form } = this.props;
    const { getFieldDecorator } = form;
    const { standardData } = this.state;
    return (
      <Modal
        title="添加相对关系"
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        width='642px'
        centered
        destroyOnClose
      >
        <Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
          <Form.Item label="相对节点">
            {getFieldDecorator("node")(
              <Cascader
                options={this.getNodeOption()}
                placeholder="请选择"
                onChange={this.handleNodeChange}
              />,
            )}
          </Form.Item>
          <Form.Item label="相对基准">
            {getFieldDecorator("benchmark")(
              <Select placeholder="请选择">
                {
                  standardData.map((item) => (
                    <Option key={item.value} value={item.value}>{item.label}</Option>
                  ))
                }
              </Select>,
            )}
          </Form.Item>
          <Form.Item label="相对关系">
            {getFieldDecorator("relation")(
              <Select placeholder="请选择">
                <Option value="NONE">无</Option>
                <Option value="DEPARTMENT_STAFF">同部门人员</Option>
                <Option value="DEPARTMENT_LEADER">同部门领导</Option>
                <Option value="SUPERIOR_DEPARTMENT_STAFF">上级部门人员</Option>
                <Option value="SUPERIOR_DEPARTMENT_LEADER">上级部门领导</Option>
              </Select>,
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default FlowRelationSelector;
